<template>
    <div>
        <el-container class="body" direction="vertical">
        <el-header >
            <!-- 标题 -->
            <div class="title">
                <span>新冠诊疗病案管理信息系统</span>
            </div>
            <!-- 头像 -->
            <div class="header-left">
                <span style="margin-right: 10px;color:white;">欢迎：{{user.name}}</span>
				<p style="margin-right: 10px;color:white;"> | </p> 
				<el-button style="margin-right: 10px;color:white;"  type="text"
				@click="logout">登出</el-button>
            </div>
        </el-header> 
        <el-container>
            <el-aside width="200px">
				<Sidebar :menuList="menuList"/>
            </el-aside>
            <el-main>
				<router-view/>
			</el-main>
        </el-container>
        <el-footer style="height: 30px;"><address>新冠诊疗病案管理信息系统 2022-2023</address></el-footer>
    </el-container>
    </div>
</template>

<script>
import  Sidebar from '../components/SideBar/SideBar.vue'
import {queryMenus, getInfo} from '../api/user'
    export default {
		components: { Sidebar},
        data() {
            return {
                menuList:[],
				user:{},
            }
        },
		methods: {
			logout(){
				sessionStorage.removeItem('token')
				this.$router.push({path:'/login'})
			},
			async queryMenus(){
				await queryMenus().then(resp=>{
					if(resp.code == 200){
						this.menuList = resp.data
					}
				})
			},
			async getInfo(){
				await getInfo().then(resp=>{
					if(resp.code===200){
						this.user = resp.data
					}
				})
			},
		},
		mounted() {
			this.queryMenus()
			this.getInfo()
		},
    }
</script>

<style scoped>
    
    .body{
        margin: 0px;
        padding: 0px;
        width: 100vw;
        height: 100vh;
        background-color: antiquewhite;
        display: flex;
    }
	.el-aside{
		background-color:#409eff;
	}
	.el-footer{
		background-color: #1268bf;
		display: flex;
		/* 主轴居中 */
		justify-content: center;
		/* 交叉轴居中 */
		align-items: center;
		/* 文本颜色 */
		color:whitesmoke;
		/* 字体大小 */
		font-size: x-small;
		height: 10px;
	}
	.el-main{
		background-color: whitesmoke;
	}
    .el-header{
        display: flex;
        height: 500px;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #1268bf;
        
    }
    .title{
		color: whitesmoke;
		font-family: 喜鹊招牌体;
		font-size: 18px;
		
	}
	.header-left{
		color: whitesmoke;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		margin-right: 20px;
		line-height: 500px;
	}
</style>